<template>
    <view class="fly-tabbar">
        <view class="flex-block">
            <view v-for="(item,index) in list" :key="index" class="item" :class="currentIndex == index ? 'current' : ''" @click="gotoPage(item.url)">
                <view class="create" v-if="index == 2">
                    <u-image width="72rpx" height="72rpx" :src="item.icon" />
                </view>
                <template v-else>
                    <u-image width="48rpx" height="48rpx" :src="currentIndex == index ? item.icon2 : item.icon" />
                    <text>{{ item.title }}</text>
                </template>
                
            </view>
        </view>
    </view>
</template>
<script setup lang="ts">
const {proxy} = getCurrentInstance() as ComponentInternalInstance;
const props = defineProps({
  current: {
    type: Number,
    default: () => 0
  }
});
const currentIndex = computed(() => {
    return props.current;
});
let list = reactive([
    {
        icon: proxy.$icon.offlineDef,
        icon2: proxy.$icon.offlinePre,
        title: '线下',
        url: '/pages/home/index'
    },
    {
        icon: proxy.$icon.onlineDef,
        icon2: proxy.$icon.onlinePre,
        title: '线上',
        url: '/pages/online/index'
    },
    {
        icon: proxy.$icon.add,
        icon2: proxy.$icon.add,
        title: '线下',
        url: '/pages/create/index'
    },
    {
        icon: proxy.$icon.communityDef,
        icon2: proxy.$icon.communityPre,
        title: '社区',
        url: '/pages/community/index'
    },
    {
        icon: proxy.$icon.mineDef,
        icon2: proxy.$icon.minePre,
        title: '我的',
        url: '/pages/my/index'
    },
]);
const gotoPage = (url) => {
    uni.navigateTo({url: url});
}
</script>
<style lang="scss">
.fly-tabbar{
    height:calc(120rpx + var(--safe-area-inset-bottom));
    .flex-block{
        position: fixed;bottom:var(--safe-area-inset-bottom);left:0;z-index:100;width:100%;height:120rpx;box-sizing: border-box; display: flex;justify-content: space-around;text-align:center;background:#fff;
        box-sizing: border-box;padding:10rpx 0;border-top:1rpx solid #ebedf0;
    }
    &::after{
        content: '';position: fixed;bottom:0;left:0;z-index:2;width:100%;height:var(--safe-area-inset-bottom);background: #fff;
    }
    .item{text-align:center;font-size:26rpx;}
    .create{
        margin-top:6rpx;
    }
}
.current{color:#24BCB8;}
</style>